<template>
	<view class="contain">
		<!-- <u-popup :show="props.show" @close="close" @open="open" mode="top" :customStyle="{'marginTop':'160rpx'}" :overlay="true"> -->
			<view class="itemList" :class="props.show?'addAni':'closeAni'">
				<view :style="'padding:20rpx;width:'+winWidth+'px;'" class="itemclass" >
					<text class="nobg">全部分类</text>
					<text v-for="(item,index) in itemList" 
					:class="curIndex===index?'selectedText'
					:redText(item.name)?'red':''" 
					@click="selected(index)">{{item.name}}</text>
				</view>
			</view>
			
		<!-- </u-popup> -->
	</view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import { GoUrl,Toast } from '@/utils/utils'
import {  onLoad } from '@dcloudio/uni-app'
const props = defineProps({
  show: {  
	  type: Boolean,
      default:false ,
  }
})
defineExpose({props}); //暴露对外属性
const $emit = defineEmits<{
	(event : 'CloseDpDownList', data : any) : any
}>()

const winWidth=uni.$tools.winWidth();

let curIndex=ref(0);


//标红字体
const redText=function(name:string){
	let arr=["补贴爆品","女鞋","钟表眼镜"];
	return arr.findIndex(item=>item===name)>-1?true:false;
}
const itemList=reactive<any>([
	{
		name:"首页",
		url:"/pages/index/index"
	},
	{
		name:"补贴爆品",
		url:"/pages/bbb/bbb"
	},
	{
		name:"拍拍二手",
		url:"/pages/ppp/ppp"
	},
	{
		name:"电脑办公",
		url:"/pages/ddd/ddd"
	},
	{
		name:"食品饮料",
		url:"/pages/ddd/ddd"
	},
	{
		name:"女鞋",
		url:"/pages/nvnv/nvnv"
	},
	{
		name:"宠物",
		url:"/pages/ccc/ccc"
	},
	{
		name:"男鞋",
		url:"/pages/man/man"
	},
	{
		name:"爱车",
		url:"/pages/car/car"
	},
	{
		name:"箱包皮具",
		url:"/pages/xpxp/xpxp"
	},
	{
		name:"自有品牌",
		url:"/pages/pipai/pipai"
	},
	{
		name:"钟表眼镜",
		url:"/pages/yjyj/yjyj"
	},
	{
		name:"大家电",
		url:"/pages/jdjd/jdjd"
	},
	{
		name:"女装",
		url:"/pages/nvnv/nvnv"
	},
	{
		name:"房产",
		url:"/pages/fcfc/fcfc"
	},
	{
		name:"奢侈品",
		url:"/pages/scp/scp"
	},
	{
		name:"图书",
		url:"/pages/tshu/tshu"
	},
	{
		name:"珠宝首饰",
		url:"/pages/zb/zb"
	},
	{
		name:"装修定制",
		url:"/pages/xiuxiu/xiuxiu"
	},
	{
		name:"工业品",
		url:"/pages/yp/yp"
	},
	{
		name:"手机",
		url:"/pages/phone/phone"
	},
	{
		name:"玩具乐器",
		url:"/pages/music/music"
	},
]);


const selected=function(index:number){
	curIndex.value=index;
	let dataPara={
		isClose:true,
		itemName:itemList[index].name,
		itemUrl:itemList[index].url
	}
	$emit("CloseDpDownList",dataPara);
}

const close=function(){
	
}	
const open=function(){
	
}
</script>
<style lang='scss' scoped>
	@import "dropdown.scss";
</style>